<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 使用组件如果违反h5标准就会出错
        所以用is
        <tr is="row">
            <ul>
                <li is="row"></li>
            </ul>
    -->
    <div id="root">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
        <!-- 
            ref属性
         -->
        <div ref="hello" 
            @click="handleClick">
            helloworld
        </div>

    </div>
    <script>
        Vue.component(
            'row',
            {
                // 子组件data定义必须是一个函数只能return一个数据
                data(){
                    // 为了每个子组件都有一个独立的数据存储

                    return{
                        content:'this is a row'
                    }
                },
                template:'<tr><td>{{content}}</td></tr>'
            }
        )
        var vm= new Vue({
            el:'root',
            methods:{
                handleClick(){
                    // 获取dom节点用ref
                    // ref="hello"
                    this.$refs.hello.innerHtml
                }
            }
        })
    </script>
</body>
</html>